<template>
  <div class="report_main">
    <div id="report_people"></div>
  </div>
</template>
    
    <script>
import * as echarts from "echarts";

export default {
  data() {
    return {
      max: 0,
      spanActive: 1,
      txIcon: require("../../../../assets/img/bar_top.png"),
    };
  },
  mounted() {
    this.$nextTick(() => {
      this.projectCategoryAdd();
    });
  },

  methods: {
    // 柱状图
    projectCategoryAdd() {
      var chartDom = document.getElementById("report_people");
      var myChart = echarts.init(chartDom);
      var option;
      var data = [90, 85, 80, 75, 70, 65, 60, 55];
      // 用于清除定时器
      let tooltipTimer = null;
      option = {
        // tooltip: {
        //     trigger: "axis",
        //   },
        tooltip: {
          formatter(params) {
            // console.log(params, "params");
            return (
              '<span style="color:' +
              params.color +
              '">\u25CF' +
              "</span>" +
              params.name +
              // "<br/>" +
              data[params.dataIndex]
            );
            //  return    params
          },
          axisPointer: {
            // 坐标轴指示器，坐标轴触发有效
            type: "line", // 默认为直线，可选为：'line' | 'shadow'
          },
          // },
        },
        //图表的位置
        grid: {
          left: "6%",
          right: "-2%",
          bottom: "-1%",
          top: "11%",
          containLabel: true,
        },
        xAxis: {
          type: "category",
          axisLine: {
            //y轴坐标轴，false为隐藏，true为显示
            show: false,
          },
          axisTick: {
            //y轴刻度线
            show: false,
          },
          axisLabel: {
            color: "#4BF3F9",
            fontWeight: "bolder",
            //设置 x轴标题都显示
            interval: 0,
            // x轴标题竖向显示
            formatter: function (value) {
              return value.split("").join("\n");
            },
          },
          nameLocation: "center",
          data: [
            "人员总数",
            "人员学历分配",
            "人员年龄结构",
            "人员培训费比率",
            "人员生产率提高率",
            "员工保持率",
            "新员工增加率",
            "员工满意度",
          ],
        },

        yAxis: {
          type: "value",
          splitLine: {
            //网格线
            show: false,
          },
          //隐藏y轴数据
          axisLabel: {
            show: false,
          },
          axisLine: {
            //y轴坐标轴，false为隐藏，true为显示
            show: false,
          },
          axisTick: {
            //y轴刻度线
            show: false,
          },
        },
        series: [
          // 中间凹凸部分
          {
            type: "pictorialBar",
            z: 18,
            data: [
              {
                value: 90,
                symbol: "image://" + this.txIcon,
                // 大小 左右  上下
                symbolSize: [13, 9],
                //位置 左右  上下
                symbolOffset: [0, -3],
                symbolPosition: "end",
              },
              {
                value: 85,
                symbol: "image://" + this.txIcon,
                symbolSize: [13, 9],
                //位置 左右  上下
                symbolOffset: [0, -3],
                symbolPosition: "end",
              },
              {
                value: 80,
                symbol: "image://" + this.txIcon,
                symbolSize: [13, 9],
                //位置 左右  上下
                symbolOffset: [0, -3],
                symbolPosition: "end",
              },
              {
                value: 75,
                symbol: "image://" + this.txIcon,
                symbolSize: [13, 9],
                //位置 左右  上下
                symbolOffset: [0, -3],
                symbolPosition: "end",
              },
              {
                value: 70,
                symbol: "image://" + this.txIcon,
                symbolSize: [13, 9],
                //位置 左右  上下
                symbolOffset: [0, -3],
                symbolPosition: "end",
              },
              {
                value: 65,
                symbol: "image://" + this.txIcon,
                symbolSize: [13, 9],
                //位置 左右  上下
                symbolOffset: [0, -3],
                symbolPosition: "end",
              },
              {
                value: 60,
                symbol: "image://" + this.txIcon,
                symbolSize: [13, 9],
                //位置 左右  上下
                symbolOffset: [0, -3],
                symbolPosition: "end",
              },
              {
                value: 55,
                symbol: "image://" + this.txIcon,
                symbolSize: [13, 9],
                //位置 左右  上下
                symbolOffset: [0, -3],
                symbolPosition: "end",
              },
            ],
          },
          // 下半截柱状体
          {
            data: [90, 85, 80, 75, 70, 65, 60, 55],
            type: "bar",
            barWidth: 14,
            //末端显示数据
            label: {
              bleedMargin: 10,
              show: true,
              position: "top", //显示在顶部
              textStyle: {
                fontSize: 14,
                color: "#FFFFFF",
                fontWeight: "bold",
              },
            },
            z: 9,
            itemStyle: {
              normal: {
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  {
                    offset: 0,
                    color: "#28F7E1 ",
                  },
                  {
                    offset: 1,
                    color: "#1A80FF ",
                  },
                ]),
              },
            },
          },
          {
            data: [100, 100, 100, 100, 100, 100, 100, 100],
            type: "bar",
            barGap: "-100%",
            barWidth: 14,
            itemStyle: {
              opacity: 0.5,
              color: "#0233B1",
            },
          },
        ],
      };
      // 绘图
      option && myChart.setOption(option);
      // 可调用clearLoop方法，清除定时器
      tooltipTimer && tooltipTimer.clearLoop();
      tooltipTimer = null;
      //  调用轮播的方法
      tooltipTimer = tools.loopShowTooltip(myChart, option, {
        interval: 1700, //轮播间隔的时间
        loopSeries: true, //是否开启轮播循环
      });
      // 屏幕适配
      window.addEventListener("resize", () => {
        myChart.resize();
      });
    },
  },
};
</script>
    
    <style  scoped>
.report_main {
  width: calc(100vw * 480 / 1920);
  height: calc(100vh * 330 / 1080);
  word-break: break-all;
  padding: calc(100vh * 0 / 1080) calc(100vw * 10 / 1920);
  background-color: #000;
}

#report_people {
  margin-left: 6px;
  width: calc(100vw * 480 / 1920);
  height: calc(100vh * 330 / 1080);
}
</style>
    
    